<template>
  <div class="title">
    <p
      v-for="a in areas"
      :key="a.content"
      @click="handleActive(a.content)"
      :class="{ active: active == a.content }"
    >
      {{ a.content }}
    </p>
  </div>
  <musicList :MusicDetailList="MusicDetailList" height="50" />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useSendReq } from "@/store/sendReq/index";
import { useThemeColor } from "@/store/themeColor";
import musicList from "@/components/musicList.vue";
const sendReq = useSendReq();
const themeColor = useThemeColor();
const active = ref("全部");
const MusicDetailList = reactive<musicDetail[]>([]);
const areas = [
  { value: 0, content: "全部" },
  { value: 7, content: "华语" },
  { value: 96, content: "欧美" },
  { value: 16, content: "韩国" },
  { value: 8, content: "日本" },
];

const handleActive = (area: string) => {
  MusicDetailList.length = 0;
  let a = areas.findIndex((areas) => areas.content == area);
  sendReq.getTopSong(areas[a].value).then(async (res: any) => {
    await res.data.forEach((data: any) => {
      sendReq.getTopSongDetail(data.id).then(async (response: any) => {
        await MusicDetailList.push(sendReq.songDetail(response.songs));
      });
    });
  });
};
handleActive("全部");
</script>

<style scoped lang="less">
.title {
  padding-top: 20px;
  display: flex;
  margin-bottom: 20px;
  p {
    margin-right: 10px;
  }
  .active {
    color: v-bind("themeColor.themeFontColor");
  }
}
</style>
